<template>
  <view class="complain-page">
    <view class="complain-form-box">
      <view class="title" style="text-align: center;font-weight: 600;">
        诚邀广大市民朋友反馈使用意见
      </view>
      <view class="complain-phone">
        <view class="title" style="margin-top: 30rpx;">反馈类型</view>
        <view class="content">
            <u-radio-group
              v-model="form.type"
              placement="row"
            >
              <u-radio
                :customStyle="{marginRight: '20px'}"
                v-for="(item, index) in radiolist"
                :key="index"
                :label="item.name"
                :name="item.id"
              >
              </u-radio>
            </u-radio-group>
        </view>
      </view>

      <view class="complain-phone">
        <view class="title">反馈内容</view>
        <view class="content">
          <u--textarea 
            type="textarea"
            v-model="form.content"
            placeholder="请输入反馈内容"
            label-width="0"
            :border-bottom="false"
          >
          </u--textarea>
        </view>
      </view>

      <view class="complain-phone">
        <view class="title">联系电话</view>
        <view class="content">
          <u--input
              placeholder="请输入您的联系电话或微信(可为空)"
              border="surround"
              v-model="form.phone"
            ></u--input>
        </view>
      </view>

      <view class="confrim-btn" @click="feedback"> 提交 </view>
      
      <view class="about-us"> 关于我们 </view>
      <view class="explain">
        本网站属于公益项目，由上海电子信息职业技术学院【聚是一团火】团队开发和维护，数据来源于自发组织的志愿者们收集和整理。网站相关项目源代码已开放，欢迎使用源码进行二次创作帮助更多需要的人。
       </view>
      <view class="explain" style="text-align: center;">
        聚是一团火 散是满天星
       </view>
      <view class="explain" style="text-align: center;">
        <u-link
          href="https://gitee.com/Gathering-is-a-fire/yi-tuan-gou--unapp"
          text="点击查看源码"
          :underLine="true"
        ></u-link>
       </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      radiolist: [
        {
          id: 1,
          name: '建议',
          disabled: false
        },
        {
          id: 2,
          name: '投诉',
          disabled: false
        },
        {
          id: 3,
          name: '其它',
          disabled: false
        }
      ],
      form: {
        type: 1,
        content: '',
        phone: '',
      },
    };
  },
  methods: {
    // 提交反馈
    feedback() {
      const that = this;
      if (this.content == '') {
        that.$utils.toast("请输入反馈内容！");
      }
      this.$api.user
        .feedback(this.form)
        .then((res) => {
          this.form.content = ''
          this.form.phone = ''
          that.$utils.toast("提交反馈成功！");
          setTimeout(()=>{
            uni.switchTab({
            	url: '/pages/home/home'
            });
          }, 1500)
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: $bg;
}

.complain-form-box {
  // height: calc(100vh - 88rpx);
  padding: 40rpx;
  background-color: #fff;
  .title {
    font-size: $uni-font-size-lg;
    margin-bottom: 20rpx;
  }
  .checkbox {
    .textarea {
      margin-top: 10rpx;
      // margin-left: 40rpx;
      border: $uni-border;
    }
  }
  .complain-phone {
    .title {
      margin-top: 40rpx;
      font-size: $uni-font-size-lg;
    }
    .content {
      margin-top: 20rpx;
      font-size: $uni-font-size-lg;
      color: $theme-color-secondary;
    }
  }

  .confrim-btn {
    margin: 60rpx auto 0 auto;
    width: 200rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: $uni-font-size-base;
    text-align: center;
    color: #fff;
    background-color: $theme-color-secondary;
    border-radius: 10rpx;
  }

  .about-us {
    margin-top: 60rpx;
    font-size: 32rpx;
    font-weight: 600;
    text-align: center;
  }
  .explain {
    margin-top: 20rpx;
    font-size: 28rpx;
  }
}
</style>

<style lang="scss">
.u-link {
  display: inline-block;
}
</style>